// 此文件处理3种情况 故障正常/空闲，进行中/角色
// 1. 故障 --- 正常   故障 === 2;
// 2. 空闲 --- 进行中 空闲--1 ; 运行--2
// 3. 角色： 普通用户1 --- 代理商2
// 4. 绑定：绑定1 --- 未绑定2
<template>
  <div class="selectProgram pgWbd">

    <!--故障处理    正常设备将不会再此处理-->
    <div class="main-box" v-if="isFault">
      <div class="gz">
        <div class="imgs">
          <div class="img-box">
            <img src="../../../imgs/pg-fault.png" alt="">
          </div>
        </div>
        <div class="text-box">
          <p class="text" style="letter-spacing: 0.1em;">设备故障中...</p>
          <p class="text-sup">设备正在故障中，您可以投诉建议给商家让他尽快修理</p>
        </div>
        <div class="btn-box">
          <a  class="" @click="getDeviceId()">投诉与建议</a>
        </div>
      </div>
    </div>

    <!--// 设备未绑定-->
    <div class="main-box" v-else-if="isBinding">
      <div class="wbd">
        <div class="imgs">
         <div class="img-box">
           <img src="../../../imgs/pg-wbd-1.png" alt="">
         </div>
        </div>
        <div class="text-box">
          <p class="text" style="letter-spacing: 0.1em;">设备未绑定</p>
        </div>
      </div>
    </div>

    <!--// 设备未投运-->
    <div class="main-box" v-else-if="isOperating">
      <div class="wty">
        <div class="imgs">
          <div class="img-box">
            <img src="../../../imgs/pg-wty-1.png" alt="">
          </div>
        </div>
        <div class="text-box">
          <p class="text" style="letter-spacing: 0.1em;">设备未投运</p>
          <p class="text-sup">这台设备还未投运哦，您可以考虑换台设备！</p>
        </div>
        <div class="btn-box" v-if="!isUser">
          <a  @click="updateStatus">设置为投运</a>
        </div>
        <div class="btn-box" v-else>
        </div>
      </div>
    </div>

    <!-- 运行中的设备 -->
    <div class="main-box" v-else-if="isProgressing">
      <!--// 设备-->
      <div class="device">
        <div class="echart-box">
          <chart v-if="consumeTime.sn === sn" :unOrder="true" :item="consumeTime" customer>
            <div class="text-box">
              <p class="text" style="letter-spacing: 0.1em;">正在使用中，请等一小会...</p>
              <p class="text-ck" v-if="!isUser">您也可以去"查看设备"，或者去浏览其他的内容</p>
              <p class="text-ck" v-if="isUser">您也可以去"查看订单"，或者去浏览其他的内容</p>
            </div>
          </chart>
        </div>
        <!-- 在这里需要处理普通用户，以及运营商的显示， 普通用户将不会显示下面的跳转操作 -->
        <div class="btn-box" v-if="!isUser">
          <router-link to="/device" class="choose">查看设备</router-link>
        </div>
        <div class="btn-box" v-if="isUser">
          <router-link :to="`/orderLoading/${openId}`" class="choose">查看订单</router-link>
        </div>
      </div>
    </div>

    <!--// c选择程序-->
    <div class="main-box"  v-else-if="!isUser && !isFault && !isProgressing">
      <div class="program">
        <program></program>
        <div class="btn-box">
          <router-link to="/device" class="btn-ck">查看设备</router-link>
          <router-link :to="`/choose/${openId}&${sn}&${type}`" class="btn-xz">选择程序</router-link>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
  import program from './program.vue'
  import * as api from 'api';
  export default {
    data () {
      return {
        deviceId: '', // 设备id
        selectProgram: false,
        openId: '',
        isFault: false,
        isProgressing: true,
        isUser: true,
        isBinding: false,
        sn: '',
        type: '',
        vender: '志高',
        modelName: 'DH_009',
        consumeTime: {}
      }
    },

    created () { // :openId/:deviceType/:deviceStatus/:role/:sn/:type
      this.$store.dispatch('updateOpenId', this.$route.query.openId);
      this.openId = this.$route.query.openId;
      this.isFault = this.$route.query.isFault === '2';
      this.isOperating = this.$route.query.isFault === '3';
      this.isProgressing = this.$route.query.isFree === '2';
      this.isBinding = this.$route.query.isBinding === '2';
      this.isUser = this.$route.query.role === '1';
      this.sn = this.$route.query.sn;
      this.type = this.$route.query.type;
      this.agencyId = this.$route.query.agencyId;
      api.queryDeviceInfo({
        limit: 10,
        offset: 0,
        sn: this.sn
      })
        .then(res => {
          this.consumeTime = res.resultData[0];
        })
    },

    components: {
      chart: require('@/components/chart'),
      program: program
    },

    methods: {
      // 把未投运设置投运
      updateStatus () {
        api.updateStatus({
          agencyId: this.$store.state.userInfo.id,
          deviceStatus: 1,
          deviceSN: this.sn
        })
          .then(res => {
            this.$router.push({ path: '/device' })
          })
          .catch(() => {
            weui.topTips('设置失败');
          })
      },

      // 获取设备deviceId
      getDeviceId () {
        api.queryDeviceInfo({
          sn: this.sn
        })
          .then((res) => {
            this.deviceId = res.resultData[0].deviceId
            if (this.deviceId) {
              this.feedback()
            }
          })
      },
      // 反馈
      feedback () {
        api.feedback({
          userId: this.$store.state.userInfo.id,
          feedbackContent: '故障',
          agencyId: this.agencyId,
          deviceId: this.deviceId,
          deviceTypeName: +this.type === 1 ? '洗衣机' : '烘干机',
          flags: 2
        })
          .then((res) => {
            this.Toast(res.resultDetail);
          })
      }
    },

    mounted () {
    }
  }
</script>
<style lang="scss">
  @import '../../../styles/common/common';
  .pgSy {
    @include bis('../../../imgs/pg-sy.jpg');
  }
  .pgWbd {
    @include bis('../../../imgs/pg-wbd.jpg');
  }
  .pgBd {
    @include bis('../../../imgs/pg-bd.jpg');
  }
  .selectProgram {
    @include wh(100%, 100%);
    @include fj();
    .main-box {
      width: 80%;
      margin: auto;
      /* 设备在使用中 */
      .device {
        @include wh(100%, 100%);
        background: #fff;
        @include borderRadius(5px);
        .echart-box {
          //  height: px2rem(560);
        }
        .text-box {
          padding: px2rem(0) px2rem(90);
          margin-top: px2rem(-10);
          .text {
            color: #4c4c4c;
            font-size: px2rem(32);
          }
          .text-ck {
            color: #4c4c4c;
            opacity: 0.7;
            font-size: px2rem(26);
          }
        }
        .btn-box {
          padding: px2rem(10) px2rem(115) px2rem(40);
          .item {
            @include fj();
            justify-content: center;
            color: #ccc;
            font-size: px2rem(32);
            padding-top: px2rem(20);
          }
          a {
            @include fj();
            justify-content: center;
            display: inline-block;
            @include  wh(100%, px2rem(84));
            @include borderRadius(30px);
            line-height: px2rem(80);
            color: #fff;
            background: #2f9afb;
            font-size: px2rem(32);
          }
          .choose {
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
          }
          .query {
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
      // 已绑定
      .program {
        @include wh(100%, 100%);
        background: #fff;
        padding-top: px2rem(30);
        @include borderRadius(5px);
        .btn-box {
          padding: px2rem(40) px2rem(115) px2rem(30);
          text-align: center;
          .btn-ck {
            background: #2f9afb;
          }
          .btn-xz {
            color: #2f99fc;
          }
          a {
            display: block;
            @include  wh(100%, px2rem(84));
            @include borderRadius(30px);
            line-height: px2rem(80);
            color: #f5fdff;
            font-size: px2rem(32);
          }
        }
      }
      // 未绑定
      .wbd {
        @include wh(100%, 100%);
        background: #fff;
        @include borderRadius(5px);
        .imgs {
          padding: px2rem(100) px2rem(110) px2rem(20);
          .img-box {
            height: px2rem(260);
            img {
              width: 100%;
            }
          }
        }
        .text-box {
          padding:0 px2rem(90) px2rem(120);
          font-size: px2rem(32);
          text-align: center;
          .text {
            color: #4c4c4c;
          }
          .text-sup {
            padding-top: px2rem(10);
            color: #4c4c4c;
            opacity: 0.7;
            font-size: px2rem(26);
          }
        }
      }
      // 未投运
      .wty {
        @include wh(100%, 100%);
        background: #fff;
        @include borderRadius(5px);
        .imgs {
          padding: px2rem(100) px2rem(110) px2rem(20);
          .img-box {
            height: px2rem(272);
            img {
              width: 100%;
            }
          }
        }
        .text-box {
          padding:0 px2rem(90);
          font-size: px2rem(32);
          .text {
            color: #4c4c4c;
            text-align: center;
          }
          .text-sup {
            padding-top: px2rem(10);
            color: #4c4c4c;
            opacity: 0.7;
            font-size: px2rem(26);
          }
        }
        .btn-box {
          padding: px2rem(40) px2rem(115) px2rem(100);
          text-align: center;
          a {
            display: block;
            background: #2f9afb;
            @include  wh(100%, px2rem(84));
            @include borderRadius(30px);
            line-height: px2rem(80);
            color: #f5fdff;
            font-size: px2rem(32);
          }
        }
      }
      // 故障
      .gz {
        @include wh(100%, 100%);
        background: #fff;
        @include borderRadius(5px);
        padding-bottom: px2rem(100);
        .imgs {
          padding: px2rem(100) px2rem(110) px2rem(20);
          .img-box {
            height: px2rem(280);
            img {
              width: 100%;
            }
          }
        }
        .text-box {
          padding:0 px2rem(90);
          font-size: px2rem(32);
          .text {
            color: #4c4c4c;
            text-align: center;
          }
          .text-sup {
            padding-top: px2rem(10);
            color: #4c4c4c;
            opacity: 0.7;
            font-size: px2rem(26);
          }
        }
        .btn-box {
          padding: px2rem(40) px2rem(115) 0;
          text-align: center;
          a {
            display: block;
            background: #2f9afb;
            @include  wh(100%, px2rem(84));
            @include borderRadius(30px);
            line-height: px2rem(80);
            color: #f5fdff;
            font-size: px2rem(32);
          }
        }
      }
    }
  }
</style>
